<template>
	<view class="page">
		<view class="title">
			<view>Hello！<br>欢迎来到XXX</view>
		</view>
		<view class="form">
			<view class="inputs">
				<view class="account">
					<view>+86</view> <input type="number" v-model="account" :adjust-position="false"
						placeholder="手机号" />
				</view>
				<view class="vcode">
					<input type="number" v-model="vcode" :adjust-position="false" placeholder="请输入验证码" />
					<text v-if="vcodeTime==0" style="color:#3ba662" @click="getVcode">获取验证码</text>
					<text v-else style="color:#ccc">重新获取({{vcodeTime}}s)</text>
				</view>
			</view>
			<view class="button">
				<view @click="login">
					立即登录
				</view>
			</view>
			<view class="tip">
				<text>未注册的手机号验证后即可完成注册</text>
			</view>
		</view>
		<view class="other">
			<view class="tip">
				其他登录方式
			</view>
			<view class="items">
				<view @click="otherLogin('weixin')"><uni-icons type="weixin" color="#fff" size="30"></uni-icons></view>
				<view @click="otherLogin('qq')"><uni-icons type="qq" color="#fff" size="30"></uni-icons></view>
				<view @click="otherLogin('weibo')"><uni-icons type="weibo" color="#fff" size="30"></uni-icons></view>
			</view>
		</view>
		<view class="pact">
			<radio :checked="pactChecked" activeBackgroundColor="#3ba662" activeBorderColor="#3ba662"
				borderColor="#3ba662" color="#fff" @click="pactChange" />
			<view>我已阅读并同意<text @click="toPact">《用户协议》</text>和<text @click="toPact">《隐私协议》</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: "",
				vcode: "",
				pactChecked: false,
				vcodeTime: 0,
				vcodeTimer: null
			}
		},
		onLoad() {

		},
		methods: {
			login() {
				uni.showToast({
					title: "登录",
					icon: 'none'
				})
			},
			getVcode() {
				this.vcodeTime = 60
				this.vcodeTimer = setInterval(() => {
					if (this.vcodeTime > 0) {
						this.vcodeTime--
					} else {
						clearInterval(this.vcodeTimer)
						this.vcodeTimer = null
					}
				}, 1000)
				uni.showToast({
					title: "获取验证码",
					icon: 'none'
				})
			},
			otherLogin(type) {
				uni.showToast({
					title: type + "登录",
					icon: 'none'
				})
			},
			pactChange() {
				this.pactChecked = !this.pactChecked
			},
			toPact() {
				uni.showToast({
					title: "协议",
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background: linear-gradient(180deg, rgba(255, 250, 235, 1) 0%, rgba(227, 255, 224, 0) 40%, #ffffff 100%);

		.title {
			padding-top: 220rpx;
			padding-bottom: 130rpx;

			view {
				padding-left: 64rpx;
				font-size: 48rpx;
				font-weight: 700;
				color: #383838;
			}
		}

		.form {
			flex: 1;
			padding: 0 64rpx;

			.inputs {
				margin-bottom: 132rpx;

				>view {
					height: 96rpx;
					border-bottom: 1rpx solid #cdcdcd;
					display: flex;
					align-items: center;

					input {
						flex: 1;
					}
				}

				.account {
					margin-bottom: 48rpx;

					view {
						padding-right: 20rpx;
						margin-right: 20rpx;
						border-right: 1rpx solid #cdcdcd;
					}
				}

				.vcode {
					text {
						text-wrap: nowrap;
					}
				}
			}

			.button {
				view {
					line-height: 96rpx;
					border-radius: 20rpx;
					text-align: center;
					font-size: 32rpx;
					color: #ffffff;
					background-color: #3ba662;
				}
			}

			.tip {
				font-size: 28rpx;
				text-align: center;
				margin-top: 30rpx;
				color: #808080;
			}
		}

		.other {
			padding: 0 160rpx;
			margin-bottom: 60rpx;

			.tip {
				font-size: 28rpx;
				text-align: center;
				margin-top: 30rpx;
				color: #808080;
				position: relative;
				margin-bottom: 40rpx;
			}

			.tip::before,
			.tip::after {
				content: '';
				width: 116rpx;
				height: 2rpx;
				position: absolute;
				top: calc(50% - 1rpx);
			}

			.tip::before {
				background: linear-gradient(90deg, rgba(204, 204, 204, 0) 0%, rgba(204, 204, 204, 1) 100%);
				left: 0;
			}

			.tip::after {
				background: linear-gradient(90deg, rgba(204, 204, 204, 1) 0%, rgba(204, 204, 204, 0) 100%);
				right: 0;
			}

			.items {
				display: flex;
				align-items: center;
				justify-content: space-around;

				view {
					padding: 6rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				view:nth-child(1) {
					background-color: #00C800;
				}

				view:nth-child(2) {
					background: #4cafe9;

				}

				view:nth-child(3) {
					background: #e34c46;
				}

				view:active {
					opacity: .9;
					transform: scale(1.02);
				}
			}
		}

		.pact {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: 70rpx;
			font-size: 24rpx;

			text {
				color: #3ba662;
			}

			radio {
				:deep(.uni-radio-input) {
					border: 1rpx solid #3ba662;
				}

				transform:scale(0.6)
			}
		}
	}
</style>